<template>
  <div style="padding-top: 0.88rem">
    <div class="item-head">
      <div class="back" @click="$router.go(-1)">
        <van-icon name="arrow-left" />
      </div>
      <div class="search">
        <input
          type="text"
          class="gosearch"
          placeholder="请搜索商品"
          v-model.trim="keyword"
        />
        <button class="changestyle" @click="goResult()"></button>
      </div>
    </div>
    <div class="history">
      <p>搜索记录</p>
      <ul>
        <div v-if="history.length === 0">暂无搜索记录</div>
        <li v-for="his in history" :key="his" @click="clickHistory(his)">
          {{ his }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  data () {
    return {
      keyword: '',
      history: localStorage.getItem('his')
        ? JSON.parse(localStorage.getItem('his'))
        : []
    }
  },
  methods: {
    goResult () {
      if (this.keyword === '') {
        Dialog({ message: '你特么输入啊？？！！' })
        return
      }
      let his = localStorage.getItem('his')
        ? JSON.parse(localStorage.getItem('his'))
        : []
      his.unshift(this.keyword)
      if (his.length > 15) {
        his.length = 15
      }
      his = [...new Set(his)]
      localStorage.setItem('his', JSON.stringify(his))
      this.$router.push({
        path: '/searchresult',
        query: {
          keyword: this.keyword
        }
      })
    },
    clickHistory (his) {
      this.keyword = his
      this.$router.push({
        path: '/searchresult',
        query: {
          keyword: this.keyword
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999999;
  padding: 0.15rem 0;
  box-sizing: border-box;
  height: 0.88rem;
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  .back {
    text-align: center;
    width: 12%;
    font-size: 0.4rem;
    line-height: 0.56rem;
  }
  .changestyle {
    position: absolute;
    left: 0;
    width: 0.56rem;
    height: 0.56rem;
    background: rgba(0, 0, 0, 0);
    text-align: center;
    font-size: 0.22rem;
    line-height: 0.56rem;
    z-index: 9999999999999;
    cursor: pointer;
  }
  .search {
    position: relative;
    flex: 1;
    .gosearch {
      width: 80%;
      line-height: 0.56rem;
      padding-left: 0.66rem;
      background: #f0f2f5
        url(https://m.ehaoyao.com/_nuxt/img/icon-search.0efa216.png) left 0.1rem
        center no-repeat;
      color: #898989;
      background-size: 0.35rem;
      img {
        position: absolute;
        left: 0.25rem;
        width: 0.26rem;
        top: 0.1rem;
      }
    }
  }
}
.history {
  padding: 0.45rem 0.3rem 0;
  p {
    font-size: 0.36rem;
    font-weight: 700;
  }
  ul {
    margin-top: 0.4rem;
    li {
      display: inline-block;
      padding: 0.1rem 0.2rem;
      margin: 0 0.2rem 0.2rem 0;
      border: 1px solid #e5e5e5;
    }
  }
}
</style>
